<template>
	<view class="index-content">
		<TopBar :indexflag="true" :combakflag="userinfo.table_num ?false:true" :lang="userinfo.table_num?true:false"
			:bottom="true"
			:title="userinfo.table_num?i18nLocale=='ug'?userinfo.table_num+'-ئۈستەل':userinfo.table_num+'号桌':''"
			:barstyle="colortopic()">
		</TopBar>
		<Header :shopdata="Shopdata" :home="userinfo.table_num?true:false"></Header>
		<view class="topnav">
			<view :class="acnav==index?'item acitem':'item'" v-for="(item,index) in navList" :key="index"
				@click="changeNav(index)">
				{{$t(item)}}
			</view>
		</view>
		<view class="cartshop">
			<CartShop v-show="acnav==0 && Shopdata" :shopdata="Shopdata" :tablenum="!userinfo.table_num"
				:shop_id="tabelinfo.shop_id">
			</CartShop>
			<MyOrder v-if="acnav==1" :shopdata="Shopdata"></MyOrder>
			<Vendor v-if="acnav==2" :shopdata="Shopdata"></Vendor>
		</view>
		<view class="offshop" v-if="Shopdata && !Shopdata.status && !loadshow" :dir="i18nLocale=='ug'?'rtl':''">
			<view class="off-box">
				<u-icon name="lock" :color="colortopic()" size="50"></u-icon>
				<view class="">{{$t('RestaurantClosed')}}</view>
				<view class="shop-time">
					<text>{{$t('BusinessHours')}}</text>
					{{Shopdata.work_time}}
				</view>
			</view>
		</view>

		<view class="notice" v-if="!userinfo.table_num">
			<u-alert style="direction: rtl;pointer-events: auto" :title="$t('NoSeliveryService')" type="error"
				:closable="true"></u-alert>
		</view>
		<u-popup v-if="!userinfo.table_num" :show="popshow" :round="7" mode="center" @close="close" @open="open">
			<view class="pop-box">
				<view class="pop-title">{{$t('WechatCode')}}</view>
				<u-icon style="margin-top: 20rpx;" name="scan" :color="colortopic()" size="90"></u-icon>
				<view class="button-grop">
					<view class="button" style="color:#000" @click="popshow=false">{{$t('Cancel')}}</view>
					<view class="button" :style="{background:colortopic()}" @click="changeScan">{{$t('Scan')}}</view>
				</view>
			</view>
		</u-popup>
		<u-popup v-if="!LangFlag && userinfo.table_num" :show="langshow" :round="7" mode="center" @close="close"
			@open="open">
			<view class="lang-box">
				<view class="pop-title">ئۆزىڭىزگە قولاي بولغان تىلنى تاللاڭ</view>
				<view class="pop-title">请选择语言</view>
				<view class="button-grop">
					<view class="button" style="color:#000;width:30%" @click="selecetLang('ug')">ئۇيغۇرچە</view>
					<view class="button" style="color:#000;width: 30%" @click="selecetLang('cn')">中文</view>
				</view>
			</view>
		</u-popup>
		<Loading :show="loadshow" iconName="circle-round" :showText="false"></Loading>
		<u-toast ref="uToast" :message="notmessage"></u-toast>
	</view>
</template>

<script>
	import TopBar from "@/components/TopBar.vue"
	import CartShop from "@/components/cart-shop/cart-shop.vue"
	import Header from "./Header.vue"
	import MyOrder from "./Myorder.vue"
	import Vendor from "./Vendor.vue"
	import {
		getshopone
	} from '@/api/all.js';
	import {
		baseURL
	} from '@/api/base.js'; //导入接口的前缀地址
	import {
		Login
	} from '@/api/http.js'; //导入接口的前缀地址
	export default {
		components: {
			TopBar,
			Header,
			CartShop,
			MyOrder,
			Vendor
		},

		data() {
			return {
				acnav: this.$store.state.current,
				loadshow: true,
				tabelinfo: this.$store.state.tabelinfo,
				dataList: [],
				navList: ['Menu', 'Order', 'Vendor'],
				userinfo: {
					shop_id: '',
					table_num: ''
				},
				popshow: false,
				langshow: false,
				notmessage: '请仔细填写!',
			}
		},
		onLoad(e) {
			if (e.shop_id) {
				this.userinfo.shop_id = e.shop_id;
				this.userinfo.table_num = e.table_num;
				if (!e.table_num) {
					this.popshow = true;
				}
				this.$store.commit('Settabelinfo', {
					shop_id: this.userinfo.shop_id,
					table_num: this.userinfo.table_num
				});
				this.getshoplist(this.userinfo.shop_id);
				if (!this.$store.state.usertoken) {
					Login().then((res) => {
						console.log(res, '+++++++++++')
					});
				}
			}
			if (e.q) {
				const query = decodeURIComponent(e.q);
				this.userinfo.shop_id = this.getQueryString(query, 'shop_id');
				this.userinfo.table_num = this.getQueryString(query, 'table_num');
				//存到store
				this.$store.commit('Settabelinfo', {
					shop_id: this.userinfo.shop_id,
					table_num: this.userinfo.table_num
				});
				this.getshoplist(this.userinfo.shop_id);
				const time = parseInt(e.scancode_time) // 获取用户扫码时间 UNIX 时间戳
				if (!this.$store.state.usertoken) {
					Login().then((res) => {
						console.log(res, '++++++++++')
					});
				}
			}
		},
		computed: {
			i18nLocale() {
				return this.$i18n.locale;
			},
			LangFlag() {
				this.langshow = true;
				return this.$store.state.lang;
			},
			Shopdata() {
				return this.$store.state.shop.totalshop;
			}
		},
		methods: {
			changeNav(index) {
				this.acnav = index;
				this.$store.commit('setCurrent', index);
			},
			//获取商铺商品
			getshoplist(shop_id) {
				let that = this;
				if (this.$store.state.shop.totalshop) {
					that.$store.commit('clearShop');
				}
				getshopone({
					id: shop_id
				}).then(res => {
					console.log(res, '++++++');
					if (res.code == 200) {
						let data = res.body.data;
						that.$store.commit('Setshopinfo', data);
						setTimeout(() => {
							that.loadshow = false;
						}, 200)
					} else {
						console.log('错误');
					}
				})
			},
			getQueryString(url, name) {
				var reg = new RegExp('(^|&|/?)' + name + '=([^&|/?]*)(&|/?|$)', 'i')
				var r = url.substr(1).match(reg)
				if (r != null) {
					return r[2]
				}
				return null;
			},
			open() {},
			close() {
				this.popshow = false
			},
			changeScan() {
				this.popshow = false;
				uni.scanCode({
					scanType: ['qrCode'],
					// 扫码成功后的回调
					success: (res) => {
						let url = res.result;
						if (url.includes("dikidiki.cn")) {
							// 提取查询字符串部分
							var queryStr = url.split('?')[1];

							// 解析参数为键值对
							var params = queryStr.split('&').reduce(function(params, param) {
								var pair = param.split('=');
								params[pair[0]] = decodeURIComponent(pair[1]);
								return params;
							}, {});

							// 获取所需信息
							var shop_id = params['shop_id'];
							var table_num = params['table_num'];
							uni.reLaunch({
								url: '/pages/index/index?shop_id=' + shop_id + '&table_num=' +
									table_num
							})
						} else {
							let that = this;
							that.$refs.uToast.show({
								top: 0,
								message: this.$t('InvalidQRCode'),
								color: '#fff',
								bgColor: '#f0ba53'
							})
						}
					}
				})
			},
			selecetLang(lang) {
				if (lang == 'ug') {
					this.$i18n.locale = 'ug';
					this.$store.commit('setLang', 'ug');
				} else {
					this.$i18n.locale = 'cn';
					this.$store.commit('setLang', 'cn');
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.index-content {
		width: 100%;
		height: 100vh;
		box-sizing: border-box;
		position: relative;

		.notice {
			width: 100%;
			position: absolute;
			left: 0%;
			bottom: 10%;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.topnav {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-around;
			background-color: $uni-bg-color-box;
			box-sizing: border-box;
			padding: 0rpx 20rpx;
			font-size: $uni-font-size-base;

			.item {
				width: 30%;
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 20rpx 0rpx;
			}

			.acitem {
				color: $uni-color-topic;
			}
		}

		.cartshop {
			width: 100%;
			height: calc(100% - 420rpx);
			box-sizing: border-box;
			position: relative;

		}

		.offshop {
			width: 100%;
			height: 100%;
			backdrop-filter: blur(3px);
			position: absolute;
			top: 0%;
			z-index: 999;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			.off-box {
				width: 100%;
				height: 350rpx;
				position: absolute;
				bottom: 0%;
				left: 0%;
				background-color: #ccc;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: space-around;
				border-radius: 30rpx 30rpx 0rpx 0rpx;
				// border-radius: $uni-border-radius-lg;
				font-size: $uni-font-size-lg;

				.shop-time {
					display: flex;
					align-items: center;
					color: $uni-text-color-grey;
					font-size: $uni-font-size-sm1;

					text {
						padding: 0rpx 10rpx;
					}
				}
			}
		}

		.noserver {
			backdrop-filter: blur(1px);

			.off-box {
				justify-content: center;

				.title-text {
					padding: 10rpx 0rpx;
				}
			}
		}

		.pop-box {
			width: 600rpx;
			height: 500rpx;
			display: flex;
			flex-direction: column;
			align-items: center;

			.pop-title {
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 20rpx 0rpx;
				margin-top: 20rpx;
			}

			.input-item {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: $uni-spacing-padding-sm 40rpx;
				box-sizing: border-box;
				margin-top: 20rpx;

				input {
					font-size: $uni-font-size-base;
					// border: 1rpx solid #999;
					text-align: center;
				}

				.title {
					color: $uni-color-title;
					font-size: $uni-font-size-base;
					padding: 0rpx 10rpx;
					// padding: 0rpx 30rpx;'
				}
			}

			.button-grop {
				width: 100%;
				display: flex;
				justify-content: space-around;
				margin-top: 100rpx;

				.button {
					padding: 20rpx 40rpx;
					border-radius: 15rpx;
					background-color: #e7e7e7;
					color: #fff;
				}
			}
		}

		.lang-box {
			width: 600rpx;
			height: 300rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			box-sizing: border-box;
			padding-top: 10rpx;

			.pop-title {
				display: flex;
				align-items: center;
				justify-content: center;
				margin-top: 10rpx;
			}

			.button-grop {
				width: 100%;
				display: flex;
				justify-content: space-around;
				margin-top: 100rpx;

				.button {
					padding: 20rpx 40rpx;
					border-radius: 15rpx;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}
		}
	}
</style>